<template>
  <q-layout view="hHh Lpr LFf">
    <template v-if="currentUser">
      <login-top-bar @toggleDrawer="miniState = !miniState" />
    </template>
    <template v-else>
      <guest-top-bar @toggleDrawer="miniState = !miniState" />
    </template>

    <q-drawer
      v-model="leftDrawerOpen"
      class="drawer-container"
      :mini="true"
      :mini-width="72"
      :width="300"
      persistent
      no-swipe-backdrop
      behavior="desktop"
    >
      <drawer />
    </q-drawer>
    <q-page-container class="page-container column">
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import { storeToRefs } from 'pinia';
import { useUserStore } from 'stores/user-store';
import Drawer from 'components/drawer/Drawer.vue';
import GuestTopBar from './components/Topbar/GuestTopBar.vue';
import LoginTopBar from './components/Topbar/LoginTopBar.vue';
const { currentUser } = storeToRefs(useUserStore());
const $q = useQuasar();
const miniState = ref(true);
const leftDrawerOpen = ref(true);
</script>
<style lang="sass">

.q-drawer--mini
  padding: none
.drawer-container
  box-shadow: inset -4px 0px 6px 0px rgba(0, 0, 0, .32)
</style>
